@(geneIds: Option[String])(implicit request: RequestHeader)
	@main("热图")("heatmap") {
		<div class="page-content">

			<div class="page-bar">
				<ul class="page-breadcrumb">
					<li>
						<i class="fa fa-snowflake-o"></i>
						<a href="#">热图</a>
					</li>
				</ul>
			</div>


			<div class="row-fluid">

				<div class="row">
					<div class="col-md-12 col-sm-12">
						<div class="portlet green-jungle box">
							<div class="portlet-title">
								<div class="caption">
									设置参数
								</div>
							</div>

							<div class="portlet-body">

								<form class="registration-form form-horizontal" id="form"
								accept-charset="UTF-8" method="post">

									<div id="hand">
										<div class="form-group">
											<label class="control-label col-sm-2">样品:</label>
											<div class="col-sm-6" >
												<div class='checkbox' id='sampleName'></div>
											</div>
										</div>


										<div class="form-group">
											<div class="actions col-sm-offset-2 col-sm-1">
												<button type="button" class="btn btn-default" id="search" onclick="selectAll()">
													全选</button>
											</div>
											<div class="actions col-sm-3">
												<button type="button" class="btn btn-default" id="search" onclick="reverseSelect()">
													反选</button>
											</div>
										</div>
									</div>

									<div class="form-group">
										<label class="control-label col-sm-2">蛋白ID:</label>
										<div class="col-sm-6">
											@if(geneIds.isDefined) {
												<textarea name="geneIdStr" id="geneIdStr" class="form-control" rows="10">@geneIds.get</textarea>
											} else {
												<textarea name="geneIdStr" id="geneIdStr" class="form-control" rows="10"></textarea>
											}
											<span class="help-block">e.g.,&nbsp;<a href="#"><em id="egGene">
												example</em></a></span>
										</div>
									</div>

									<div class="form-group" id="paired">
										<label class="control-label col-sm-2">
											数据变换方法<span id="question5" style="margin-bottom: 5px">
											<a type="button" title="说明" data-container="body" data-toggle="popover"
											data-placement="right" data-content="预处理后的数据经过变换后，进行热图的计算和绘制。"
											data-trigger="hover"><i class="fa fa-question-circle-o" ></i></a>
										</span>:</label>
										<div class="col-sm-4">
											<select class="form-control" name="method" required="required" style="border-radius: 4px;">
												<option value="none">None</option>
												<option value="log2" selected="selected">log2_transform:
													log2(value+1)</option>
												<option value="log2_center">log2_transform_row_median_center:
													scale(log2(value+1))</option>
												<option value="center">row_median_center: scale(value)</option>
											</select>
										</div>
									</div>

									<div class="form-group" id="paired">
										<label class="control-label col-sm-2">行（蛋白）距离计算方法:</label>
										<div class="col-sm-4">
											<select class="form-control" name="rowDist" required="required" onchange="change()" id="distanceMethod">
												<option value="euclidean" selected>euclidean</option>
												<option value="canberra">canberra</option>
												<option value="minkowski">minkowski</option>
												<option value="correlation">correlation</option>
											</select>
										</div>
									</div>

									<div class="form-group" id="paired">
										<label class="control-label col-sm-2">列（样品）距离计算方法:</label>
										<div class="col-sm-4">
											<select class="form-control" name="colDist" required="required" onchange="change()" id="distanceMethod">
												<option value="euclidean" selected>euclidean</option>
												<option value="canberra">canberra</option>
												<option value="minkowski">minkowski</option>
												<option value="correlation">correlation</option>
											</select>
										</div>
									</div>

									<div class="form-group" id="paired">
										<label class="control-label col-sm-2">行（蛋白）聚类方法:</label>
										<div class="col-sm-4">
											<select class="form-control" name="rowCluster" required="required" style="border-radius: 4px;">
												<option value="single">single</option>
												<option value="complete" selected="selected">complete</option>
												<option value="average">average</option>
												<option value="weighted">weighted</option>
												<option value="centroid">centroid</option>
												<option value="median">median</option>
												<option value="ward">ward</option>
											</select>
										</div>
									</div>

									<div class="form-group" id="paired">
										<label class="control-label col-sm-2">列（样品）聚类方法:</label>
										<div class="col-sm-4">
											<select class="form-control" name="colCluster" required="required" style="border-radius: 4px;">
												<option value="single">single</option>
												<option value="complete" selected="selected">complete</option>
												<option value="average">average</option>
												<option value="weighted">weighted</option>
												<option value="centroid">centroid</option>
												<option value="median">median</option>
												<option value="ward">ward</option>
											</select>
										</div>
									</div>

									<div class="form-group">
										<div class="actions col-sm-offset-2 col-sm-2">
											<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="mySearch()">
												运行</button>
										</div>
										@*<div class="actions col-sm-2">*@
										@*<button type="reset" class="btn btn-primary" style="width: 90%;">*@
										@*重置</button>*@
										@*</div>*@

									</div>


								</form>

							</div>
						</div>
					</div>
				</div>

				<div id="result" style="display: none">
					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet green-jungle box">
								<div class="portlet-title">
									<div class="caption">
										热图
									</div>
									<div class="tools">
										<a href="javascript:;" class="collapse">
										</a>
									</div>
								</div>

								<div class="portlet-body" align="center">
									<div id="charts">没有图片结果生成！</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-md-12 col-sm-12">
							<div class="portlet green-jungle box">
								<div class="portlet-title">
									<div class="caption">
										绘图数据
									</div>
									<div class="tools">
										<a href="javascript:;" class="collapse">
										</a>
									</div>
								</div>
								<div class="portlet-body" id="noContent">暂无绘图数据！</div>
								<div class="portlet-body" style="display: none" id="content">
									<label>显示的列:</label>
									<div id="checkbox" class="checkbox">

									</div>

									<div class="table-responsive" id="tableContent">
										<table class="display table table-bordered" id="table" data-pagination="true" data-search="true"
										data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100, all]" data-multiple-search="true"
										data-show-export="true" data-export-types="['excel','txt']" data-export-data-type="all"
										>
											<thead>
												<th data-field='geneId' data-sortable='true' id="marker">蛋白ID</th>
											</thead>
										</table>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


			</div>

		</div>


		<script>
				var originalHtml = ""

				function refreshContent(myData) {
					var checkboxHtml = ""
					$.each(myData.sampleNames, function (i, v) {
						checkboxHtml += "<label style='margin-right: 15px'>" +
								"<input type='checkbox' checked='checked' value='" + v + "' onclick=\"setColumns('" + v + "')\">" + v +
								"</label>"
					})
					$("#checkbox").empty().append(checkboxHtml)
					var html = ""
					$.each(myData.sampleNames, function (i, v) {
						html += "<th data-field='" + v + "' data-sortable='true'>" + v + "</th>"
					})
					$("#tableContent").empty().append(originalHtml)
					$("#marker").after(html)
					$('#table').bootstrapTable({
						data: myData.array,
						exportOptions: {
							csvSeparator: "\t"
						}
					});
				}

				$(function () {

					$('#egGene').click(function () {
						$.ajax({
							url: "@routes.ProteinController.getFirst10GeneIdByLf()",
							type: "get",
							success: function (data) {
								$('#geneIdStr').val(data);
								$("#form").bootstrapValidator("revalidateField", "geneIdStr")
								return false
							}
						})
					});

					$.ajax({
						url: "@routes.ProteinController.getGeneIds()",
						type: "get",
						success: function (data) {
							$('#geneIdStr').typeahead({
								source: data.geneIds,
								updater: function (item) {
									return this.$element.val().replace(matcherRegex, '') + item + matcherEnd;
								},
								matcher: function (item) {
									var tquery = extractor(this.query);
									if (!tquery) return false;
									return ~item.toLowerCase().indexOf(tquery.toLowerCase())
								},
								highlighter: function (item) {
									var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
									return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
										return '<strong>' + match + '</strong>'
									})
								}
							})
						}
					})


					originalHtml = $("#tableContent").html()

					$.ajax({
						url: "@routes.ProteinController.getSampleNames()",
						type: "get",
						async: false,
						success: function (data) {
							$("#sampleName").empty()
							$.each(data.sampleNames, function (i, v) {
								var html = "<label style='margin-right: 15px;width: 100px;padding-top: 7px;'>" +
										"<input type='checkbox'  name='sampleNames[]'  value='" + v + "'>" + v +
										"</label>"
								$("#sampleName").append(html);
							})
						}
					})

					bootstrapValidator()
				})

				function selectAll() {
					$(":checkbox").prop("checked", true)
					$("#form").bootstrapValidator("revalidateField", "sampleNames[]")
				}

				function reverseSelect() {
					$(":checkbox").each(function () {
						$(this).prop("checked", !$(this).prop("checked"));
					});
					$("#form").bootstrapValidator("revalidateField", "sampleNames[]")

				}

				function mySearch() {
					var form = $("#form")
					var fv = form.data("bootstrapValidator")
					fv.validate()
					if (fv.isValid()) {
						var element = "<div id='content'><span id='info'>" + zhRunning + "</span>&nbsp;<img class='runningImage' src='@routes.Assets.at("images/running2.gif")' style='width: 30px;height: 20px;'></div>"
						var index = layer.alert(element, {
							skin: 'layui-layer-molv'
							, closeBtn: 0,
							title: zhInfo,
							btn: []
						});

						$.ajax({
							url: "@routes.ProteinController.heatmap()",
							type: "post",
							data: $("#form").serialize(),
							success: function (data) {
								layer.close(index)
								if (data.valid == "false") {
									$("#charts").html("没有图片结果生成！")
									swal("Error", data.message, "error")
									$("#content").hide()
									$("#noContent").show()
									$("#result").hide()
								} else {
									$("#charts").html(data.div)
									$("#content").show()
									$("#noContent").hide()
									refreshContent(data.json)
									$("#result").show()
								}
							}
						});
					}

				}

				function bootstrapValidator() {
					var infinityNumber = Number.MAX_VALUE
					$('#form').bootstrapValidator({
						framework: 'bootstrap',
						icon: {
							valid: 'glyphicon glyphicon-ok',
							invalid: 'glyphicon glyphicon-remove',
							validating: 'glyphicon glyphicon-refresh'
						},
						fields: {
							'sampleNames[]': {
								validators: {
									choice: {
										min: 2,
										message: '样品数量必须大于2！'
									}
								}
							},
							geneIdStr: {
								validators: {
									notEmpty: {
										message: '蛋白ID不能为空！'
									},
								}
							},

						}
					});
				}

		</script>

	}